<template>
<div>

   

   <!-- 骨架屏 -->
   <div class="index" v-if="!(gedanlist&&diantailist&&dailylist&&recommandlist&&freshlist)"  >
  
    <!-- 头部导航 -->
    <div class="indexhead">
      <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
    </div>
    <!-- 歌单 -->
    <div class="gedanlist">
      <div class="innerbox">
        <gedan class="gedan" v-for="item in gedanlist" :item="item.id" ></gedan>
      </div>
    </div>

    <!-- 电台 -->
    <div class="diantai">
      <div class="dttitle">
        <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
      </div>
      <van-skeleton  :row="1" :row-width='690'  :avatar-size='"200px"'/>
    </div>
    <!-- 每日推荐 -->
    <div class="dayrecommand" v-if="dailylist">
      <div class="daytitle">
        <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
        <span class="iconfont icon-right_x"></span>
      </div>


      <div class="daycontent">

          <div class="dayleft">

            <gedansmall :select="1" :id="dailylist[0].id">
            
            </gedansmall>

      </div>

      <div class="dayright">
        <div class="righttitle">
          <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
          <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
        </div>

        <div class="dailyinfo">
          
           <span>"<van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/>"</span> 
           <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>         

        </div>

           <div class="user">
                   <div class="mask">

                   </div>

                   <img src="../../assets/img/ceshi.jpeg" alt="">
                   <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
                   
               </div>
               
      </div>

      </div>

    

    </div>
    <!-- 其它每日推荐歌单 -->
    <div class="otherdaily" v-if="dailylist">
      <div class="othermodel">
        <gedansmall :bottominfo='true':id="dailylist[1].id" ></gedansmall>
      
      </div>
        <div class="othermodel">
        <gedansmall :bottominfo='true' :select="1" :id="dailylist[2].id"></gedansmall>
      </div>

    </div>
    <!-- 精选歌单 -->
    <div class="daytitle">
        <span ><van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/></span>
        <van-skeleton  :row="1" :row-width='100'  :avatar-size='"200px"'/>
      </div>
    <div class="jingxuan"  v-if="recommandlist" >
       
      <div class="jingxuancontent">
            <gedansmall 
            class="small" 
            :bottominfo='true' 
            :select="2" 
            v-for="(item,index) in recommandlist" 
            :key="item.id"
            v-if="index<4?true:false"
            :id='item.id'
            >
            
       </gedansmall>
     

      </div>
       <div class="jingxuancontent"  v-if="recommandlist" >
       <gedansmall 
       class="small" 
       :bottominfo='true' 
       :select="2" 
       v-for="(item,index) in recommandlist" 
       :key="item.id"
       v-if="index>=4?true:false"
       :id='item.id'
       >
       
       </gedansmall>
      </div>
    </div>
    <!-- 新鲜发行 -->
    <div class="freshmusic" 
    v-if="freshlist" 
    > 

        <div class="daytitle">
        <span>精选歌单</span>
        <div class="bottom-right">
                  <span class="iconfont icon-bofang"></span>
       </div>

      </div>
      <div class="freshcontent" v-if="freshlist" @click="storelist">

        <music 
        class="music" 
        v-for="item in freshlist" 
        :id="item.id"
        :key="item.id"
        @change-current-song="$emit('change-current-song', $event)"
        
        ></music>
      </div>

    </div>

  </div>
  <!-- 内容 -->
  <div class="index" v-if="gedanlist&&diantailist&&dailylist&&recommandlist&&freshlist" >
  
    <!-- 头部导航 -->
    <div class="indexhead">
      <span>发现</span>
    </div>
    <!-- 歌单 -->
    <div class="gedanlist">
      <div class="innerbox">
        <gedan class="gedan" v-for="(item,index) in gedanlist" :item="item" :index='index'></gedan>
       
      </div>
    </div>

    <!-- 电台 -->
    <div class="diantai">
      <div class="dttitle">
        <span>主题电台</span>
      </div>
      <div class="diantailist">
        <div class="list">
          <van-swipe class="my-swipe" :autoplay="155000" indicator-color="white" :duration='2000' :width='690' :loop='true'>
            <van-swipe-item v-for="item in freshlist" >
              <diantai class="diantaimodel" :id='item.id' ></diantai >
           </van-swipe-item>
         
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 每日推荐 -->
    <div class="dayrecommand" v-if="dailylist">
      <div class="daytitle">
        <span>每日推荐</span>
        <span class="iconfont icon-right_x"></span>
      </div>


      <div class="daycontent">

          <div class="dayleft">

            <gedansmall :select="1" :id="dailylist[0].id">
            
            </gedansmall>

      </div>

      <div class="dayright">
        <div class="righttitle">
          <span>MOO</span>
          <span>Daily</span>
        </div>

        <div class="dailyinfo">
          
           <span>"有点期待圣诞和下雪了"</span> 
           <span>by雪人朱师傅</span>         

        </div>

           <div class="user">
                   <div class="mask">

                   </div>

                   <img src="../../assets/img/ceshi.jpeg" alt="">
                   <span>朱师傅</span>
                   
               </div>
               
      </div>

      </div>

    

    </div>
    <!-- 其它每日推荐歌单 -->
    <div class="otherdaily" v-if="dailylist">
      <div class="othermodel">
        <gedansmall :bottominfo='true':id="dailylist[1].id" ></gedansmall>
      
      </div>
        <div class="othermodel">
        <gedansmall :bottominfo='true' :select="1" :id="dailylist[2].id"></gedansmall>
      </div>

    </div>
    <!-- 精选歌单 -->
    <div class="jingxuan"  v-if="recommandlist">
       <div class="daytitle">
        <span>精选歌单</span>
        <span @click="$router.push('/square')" class="iconfont icon-right_x"></span>
      </div>
      <div class="jingxuancontent">
            <gedansmall 
            class="small" 
            :bottominfo='true' 
            :select="2" 
            v-for="(item,index) in recommandlist" 
            :key="item.id"
            v-if="index<4?true:false"
            :id='item.id'
            >
            
       </gedansmall>
     

      </div>
       <div class="jingxuancontent"  v-if="recommandlist" >
       <gedansmall 
       class="small" 
       :bottominfo='true' 
       :select="2" 
       v-for="(item,index) in recommandlist" 
       :key="item.id"
       v-if="index>=4?true:false"
       :id='item.id'
       >
       
       </gedansmall>
      </div>
    </div>
    <!-- 新鲜发行 -->
    <div class="freshmusic" 
    v-if="freshlist" 
    > 

        <div class="daytitle">
        <span>精选歌单</span>
        <div class="bottom-right">
                  <span class="iconfont icon-bofang"></span>
       </div>

      </div>
      <div class="freshcontent" v-if="freshlist" @click="storelist">

        <music 
        class="music" 
        v-for="item in freshlist" 
        :id="item.id"
        :key="item.id"
        @change-current-song="$emit('change-current-song', $event)"
        
        ></music>
      </div>

    </div>

  </div>

</div>
 
</template>

<script>
import { get } from "../../http/request.js";
import gedan from "../Small/gedan.vue";
import diantai from "../Small/diantai.vue";
import gedansmall from  "../Small/gedanmodel.vue";
import music from  "../Small/music.vue";
export default {
  components: {
    gedan,
    diantai,
    gedansmall,
    music
  },
  data() {
    return {
      gedanlist: null,
      diantailist:null,
      dailylist:null,
      recommandlist:null,
      freshlist:null,
    };
  },
  computed:{

  }
  ,
  methods: {
    jingxuna(){
      console.log('jinxuan');
      this.$router.push("/home")
    },
    storelist(){
      // console.log('storelist',this.$store.storelist);
      this.$store.commit('changeplaylist',this.freshlist)

    }

  },
  mounted() {
     
    // 获取歌单数据
    get("/personalized/newsong?limit=6").then((res) => {
      // console.log('头部歌单数据',res);

      this.gedanlist = res.data.result;
      
    });

     // 电台数据
    get("/personalized/djprogram").then((res) => {
      console.log('电台歌单数据',res);

      this.diantailist = res.data.result;
      
    });


    // 每日推荐歌单
     get("/personalized?limit=3").then((res) => {
      // console.log('每日歌单数据',res);

      this.dailylist = res.data.result;
      
    });

    // 推荐歌单数据
     get("/personalized?limit=8").then((res) => {
      // console.log('推荐歌单数据',res);

      this.recommandlist = res.data.result;
      
    });

    //获取最新歌曲数据
     get("/personalized/newsong?limit=4").then((res) => {

      // console.log('最新歌曲数据',res);

      this.freshlist=res.data.result;

      // console.log(this.freshlist,res.data.result);

      

      
      // console.log(this.$store.state.playlist);

      
    });

   
  },
};
</script>

<style lang="scss" scoped>
@import url(../../comman/css/index.css);


</style>
